<template>
	<el-card class="box-card">
		<el-steps :active="4" align-center>
		  <el-step title="基础信息"></el-step>
		  <el-step title="商户位置"></el-step>
		  <el-step title="联系方式"></el-step>
		  <el-step title="门头照"></el-step>
		  <el-step title="资质信息照片上传"></el-step>
		  <el-step title="资质信息"></el-step>
		  <el-step title="银行账号信息照片上传"></el-step>
		  <el-step title="银行账号信息"></el-step>
		</el-steps>
		<el-row class="box-row">
			<el-form :model="formData" ref="formData">
				<el-form-item class="title">
					<el-col :span="24">营业执照</el-col>
				</el-form-item>
				<ul class="el-upload-list el-upload-list--picture-card" style="position: absolute;margin-left: -230px;" v-show="haslogoImg">
					<li class="el-upload-list__item is-success">
						<img :src="logoImgUrl" alt="" class="el-upload-list__item-thumbnail">
						<i class="el-icon-close"></i>
						<span class="el-upload-list__item-actions" @click="logoImgsRemove">
							<span class="el-upload-list__item-delete"><i class="el-icon-delete"></i></span>
						</span>
					</li>
				</ul>
				<el-upload class="avatar-uploader noUploadImgList" :action="uploadUrl" :before-upload="beforeUpload" list-type="picture-card" :on-success="logoImgsPreview" :on-remove="logoImgsRemove">
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-form-item class="title">
					<el-col :span="24">组织机构代码证</el-col>
				</el-form-item>
				<ul class="el-upload-list el-upload-list--picture-card" style="position: absolute;margin-left: -230px;" v-show="hasOrgImg">
					<li class="el-upload-list__item is-success">
						<img :src="orgImgUrl" alt="" class="el-upload-list__item-thumbnail">
						<i class="el-icon-close"></i>
						<span class="el-upload-list__item-actions" @click="orgImgsRemove">
							<span class="el-upload-list__item-delete"><i class="el-icon-delete"></i></span>
						</span>
					</li>
				</ul>
				<el-upload class="avatar-uploader noUploadImgList" :action="uploadUrl" :before-upload="beforeUpload" list-type="picture-card" :on-success="orgImgsPreview" :on-remove="orgImgsRemove">
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-form-item class="title">
					<el-col :span="24">税务登记证</el-col>
				</el-form-item>
				<ul class="el-upload-list el-upload-list--picture-card" style="position: absolute;margin-left: -230px;" v-show="hasTaxImg">
					<li class="el-upload-list__item is-success">
						<img :src="taxImgUrl" alt="" class="el-upload-list__item-thumbnail">
						<i class="el-icon-close"></i>
						<span class="el-upload-list__item-actions" @click="taxImgsRemove">
							<span class="el-upload-list__item-delete"><i class="el-icon-delete"></i></span>
						</span>
					</li>
				</ul>
				<el-upload class="avatar-uploader noUploadImgList" :action="uploadUrl" :before-upload="beforeUpload" list-type="picture-card" :on-success="taxImgsPreview" :on-remove="taxImgsRemove">
					<i class="el-icon-plus"></i>
				</el-upload>
			</el-form>
			<el-button type="primary" style="width:50%;margin-top: 10px;" @click="submitForm('formData')">下一步</el-button>
		</el-row>
	</el-card>
</template>

<script>
	import { upload,customerUpdate ,customerInfo} from '@/api/getData'
	export default {
		data() {
			return {
				uploadUrl:"",
				haslogoImg:false,
				logoImgUrl: "",
				hasOrgImg:false,
				orgImgUrl: "",
				hasTaxImg:false,
				taxImgUrl: "",
				formData: {
					id: "",
					licenceImgs: "",
					orgCodeImg: "",
					taxRegisterImg: "",
					currentStep:"5",
				},
			}
		},
		mounted() {
			this.formData.id = this.$route.query.id;
			if(this.formData.id != undefined && this.formData.id != ""){
				this.customerInfo(this.formData.id);
			}
			this.uploadUrl = upload;
		},
		methods: {
			async customerInfo(id) {
				const res = await customerInfo({
					id: id,
				});
				if(res.code == "0") {
					this.logoImgUrl = res.obj.licenceImgs;
					this.orgImgUrl = res.obj.orgCodeImg;
					this.taxImgUrl = res.obj.taxRegisterImg;
					this.haslogoImg = true;
					this.hasOrgImg = true;
					this.hasTaxImg = true;
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			},
			beforeUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isPNG = file.type === 'image/png';
				const isLt1M = file.size / 1024 / 1024 < 1;
				if(!isJPG && !isPNG) {
					this.$message.error('上传头像图片只能是 JPG和PNG 格式!');
				}
				if(!isLt1M) {
					this.$message.error('上传头像图片大小不能超过 1MB!');
				}
				return(isJPG || isPNG) && isLt1M;
			},
			logoImgsRemove(file, fileList) {
				this.logoImgUrl = "";
			},
			logoImgsPreview(res, file) {
				this.logoImgUrl = res.data;
				this.haslogoImg = true;
			},
			//组织机构
			orgImgsRemove(file, fileList) {
				this.orgImgUrl = "";
			},
			orgImgsPreview(res, file) {
				this.orgImgUrl = res.data;
				this.hasOrgImg = true;
			},
			//税务登记
			taxImgsRemove(file, fileList) {
				this.taxImgUrl = "";
			},
			taxImgsPreview(res, file) {
				this.taxImgUrl = res.data;
				this.hasTaxImg = true;
			},

			async submitForm(formName) {
				
				this.$refs[formName].validate(async(valid) => {
					if(valid) {
						if(this.logoImgUrl == ""){
							this.$notify.error({
								title: '提示',
								message: "请上传营业执照",
								offset: 100
							});
							return false;
						}else{
							this.formData.licenceImgs = this.logoImgUrl.replace(/\s/g,"");
						}
						if(this.orgImgUrl == ""){
							this.$notify.error({
								title: '提示',
								message: "请上传组织机构代码证",
								offset: 100
							});
							return false;
						}else{
							this.formData.orgCodeImg = this.orgImgUrl.replace(/\s/g,"");
						}
						if(this.taxImgUrl == ""){
							this.$notify.error({
								title: '提示',
								message: "请上传税务登记证",
								offset: 100
							});
							return false;
						}else{
							this.formData.taxRegisterImg = this.taxImgUrl.replace(/\s/g,"");
						}
						let res = await customerUpdate(this.formData);

						if(res.code == "0") {
							this.$router.push({
								path: 'businessSix',
								query: {
									id: res.id
								}
							})
						} else {
							this.$notify.error({
								title: '错误',
								message: res.msg,
								offset: 100
							});
						}
					}
				});
			},
		},
	}
</script>

<style scoped>
	.box-card {
		margin: 0 10px;
	}
	
	.title {
		background-color: #20a0ff;
		line-height: 60px;
		font-size: 18px;
		color: #fff;
		width:50%;
		margin: 10px auto;
	}
	.box-row{
		margin: 20px auto;
		width:100%;
		text-align: center;
	}
</style>